<template>
  <div class="infobox">
    <div class="itembox">
      <h4>眼底检查</h4>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="jcx" label="检查项" align="center" />
        <el-table-column prop="jcjf" label="检查结果" align="center" />
        <el-table-column prop="jcsj" label="检查时间" align="center" />
        <el-table-column prop="address" center label="操作" align="center">
          <template #default="scope">
            <div class="czbox">
              <el-button size="small" @click="handleAdd()"> 添加记录 </el-button>
              <el-button size="small" @click="handleEdit()"> 修改 </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="dialogVisible" title="眼底检查" width="600" :before-close="handleClose">
      <el-form :model="form" label-width="auto" ref="ruleFormRef">
        <span>左眼</span>
        <el-form-item label="左眼检查报告 ">
          <el-upload v-model:file-list="fileListzy" class="upload-demo" multiple :limit="1" :http-request="uploadFile">
            <el-button type="primary">上传图片</el-button>
            <template #tip>
              <div class="el-upload__tip"></div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="bz">
          <el-input v-model="form.zybg" type="textarea" />
        </el-form-item>
        <span>右眼</span>
        <el-form-item label="右眼检查报告 ">
          <el-upload v-model:file-list="fileListyy" class="upload-demo" multiple :limit="1" :http-request="uploadFiletwo">
            <el-button type="primary">上传图片</el-button>
            <template #tip>
              <div class="el-upload__tip"></div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="bz">
          <el-input v-model="form.yybg" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer savebox">
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="savebutton"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
let dialogVisible = ref(false);
const ruleFormRef = ref(null);

const form = reactive({});
const tableData = ref([
  {
    date: "10",
    name: "10",
    address: "10"
  }
]);
const fileListzy = ref([]);
const fileListyy = ref([]);
//添加
let handleAdd = () => {
  dialogVisible.value = true;
};
//修改
let handleEdit = () => {
  dialogVisible.value = true;
};
const handleClose = () => {
  dialogVisible.value = false;
};
let resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
};
let savebutton = () => {};
let uploadFile = val => {
  const fd = new FormData();
  fd.append("functionId", val.file.uid);
  fd.append("moduleId", 19);
  fd.append("upfile", val.file);
};
let uploadFiletwo = val => {
  const fd = new FormData();
  fd.append("functionId", val.file.uid);
  fd.append("moduleId", 19);
  fd.append("upfile", val.file);
};
</script>
<style lang="scss" scoped>
.tjjlbox {
  margin-right: 5px;
}

.itembox {
  width: 100%;
  overflow: auto;
}

.czbox {
  display: flex;
  justify-content: space-around;
}
</style>
